<template>
    <div class="app-container calendar-list-container">
        <!-- 查询条件 -->
        <div class="filter-container">

            <div class="filter-li">
                <label>报价时间</label>
                <el-date-picker v-model="listQuery.time" type="daterange" placeholder="选择日期范围">
                </el-date-picker>
            </div>

            <div class="filter-li">
                <label>客户单位</label>
                <el-select v-model="listQuery.customer_id" placeholder="请选择" clearable filterable>
                    <el-option v-for="item in customers" :key="item.id" :label="item.dept" :value="item.id">
                    </el-option>
                </el-select>
            </div>

            <div class="filter-li">
                <label>状态</label>
                <el-select v-model="listQuery.status_text" placeholder="请选择" clearable>
                    <el-option v-for="item in statusArray" :key="item.name" :label="item.name" :value="item.name">
                    </el-option>
                </el-select>
            </div>

            <el-button class="filter-item" type="primary" v-waves icon="search" @click="onFilter">搜索</el-button>
            <el-button v-show="listQuery.customer_id" class="filter-item" type="primary" v-waves icon="search" @click="onAdd">新增报价</el-button>
        </div>

        <!-- 列表 -->
        <el-table :data="rows" v-loading="listLoading" element-loading-text="加载中，请稍后" border fit highlight-current-row style="width: 100%"
            @current-change="onRowSelect">

            <el-table-column type="index" width="50">
            </el-table-column>

            <el-table-column align="center" label="客户单位">
                <template scope="scope">
                    <span>{{scope.row['customer.dept'] }}</span>
                </template>
            </el-table-column>

            <el-table-column align="center" label="产品合计">
                <template scope="scope">
                    <span>{{scope.row.sum}}</span>
                </template>
            </el-table-column>

            <el-table-column align="center" label="维护费用">
                <template scope="scope">
                    <span>{{scope.row.fee}}</span>
                </template>
            </el-table-column>

            <el-table-column align="center" label="总计金额">
                <template scope="scope">
                    <span>{{scope.row.total}}</span>
                </template>
            </el-table-column>

            <el-table-column align="center" label="最终报价">
                <template scope="scope">
                    <span>{{scope.row.confirm}}</span>
                </template>
            </el-table-column>

            <el-table-column align="center" label="报价日期">
                <template scope="scope">
                    <span>{{scope.row.updated_at | time_format }}</span>
                </template>
            </el-table-column>

            <el-table-column align="center" label="状态">
                <template scope="scope">
                    <span>{{scope.row.status_text}}</span>
                </template>
            </el-table-column>

            <el-table-column align="center" label="操作" width="150">
                <template scope="scope">
                    <el-button size="small" type="success" @click="onEdit(scope.row)">详情</el-button>
                    <el-button size="small" type="primary" @click="onCopy(scope.row)">复制</el-button>
                </template>
            </el-table-column>

        </el-table>

        <div v-show="!listLoading" class="pagination-container">
            <el-pagination @size-change="onSizeChange" @current-change="onCurrentChange" :current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]"
                :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="count">
            </el-pagination>
        </div>

    </div>
</template>

<script>
    import api from '@/api/customer'
    import productApi from '@/api/product'
    import batchApi from '@/api/batch'
    import roleApi from '@/api/role'
    import waves from '@/directive/waves/index.js' // 水波纹指令
    import { mapState, mapActions } from 'vuex'
    import _ from 'lodash'

    export default {
        name: 'batch',
        directives: {
            waves
        },
        data() {
            return {
                listLoading: false,
                listQuery: {
                    customer_id: null,
                    status_text: undefined,
                    time: '',
                    page: 1,
                    limit: 20,
                },
                statusArray: [{ name: '口头报价' }, { name: '正式报价' }]
            }
        },
        computed: {
            ...mapState({
                customers: state => state.customers.rows,
                rows: state => state.batch.rows,
                count: state => state.batch.count,
            }),
            selected() {
                return this.row != null && this.row.id != null
            }
        },
        async created() {
            await this.$store.dispatch('customers/loadCustomers')
            this.listQuery.customer_id = this.$route.query.customer_id || ''
            await this.getList()
        },
        methods: {
            async getList() {
                this.$store.dispatch('batch/getList', this.listQuery)
            },
            onFilter() {
                this.listQuery.page = 1
                this.getList()
            },
            onRowSelect(val) {
                this.row = val
            },
            onSizeChange(val) {
                this.listQuery.limit = val
                this.getList()
            },
            onCurrentChange(val) {
                this.listQuery.page = val
                this.getList()
            },
            onEdit(row) {
                this.$router.push({ path: 'batch_edit', query: { customer_id: row.customer_id, oid: row.id } })
            },
            onAdd() {
                this.$router.push({ path: 'batch_edit', query: { customer_id: this.listQuery.customer_id } })
            },
            onCopy(row){
                this.$router.push({ path: 'batch_edit', query: { customer_id: row.customer_id, copy_id: row.id } })
            },
        }
    }

</script>
<style scoped>
    .demo-table-expand {
        font-size: 0;
    }

    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }

    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }

    ul.batch {
        list-style: none;



        .batch-item {
            display: inline-block;
        }

        li {
            margin-top: 10px;
        }
    }

</style>
